<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>宠物店数据</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <META content="MSHTML 6.00.3790.4807" name=GENERATOR>
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
<meta http-equiv="x-dns-prefetch-control" content="on">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=5749ce65dd16f6d8456d5183c5d1a908&plugin=AMap.MapType,AMap.ToolBar,AMap.Driving,AMap.PlaceSearch,AMap.DistrictLayer,AMap.Scale"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script type="text/javascript" src="./petstore_suizhou.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none
        }
        html, body{
            height: 100%;
            width: 100%;
        }
        #container {
            height: 100%;
            width: 100%;
            font-size: 14px;
            font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
        }
        #query {
            height: 80px;
            line-height: 40px;
            width: 100%;
            position: fixed;
            bottom:0;
            left:0;
            right:0;
            z-index: 9999;
            background-color: #ccc;
        }
		#query .item {
			background-color: #ccc;
		}
		#query .item input {
			height: 38px;
			width: 100%;
			padding-right: 25px;
			font-family: SimHei;
			font-size: 1rem;
			color: #666;
			outline: 0;
			border: 0 none;
			text-indent: .5em;
			border-bottom: 1px solid #3d92fb;
		}
		#query .item #doMarkBtn {
			height: 38px;
			width: 100%;
		}
		.content-window-card{position:relative;box-shadow:none;bottom:0;left:0;width:auto;padding:0;border-radius:5px;overflow:hidden;}
        .info-top{padding:10px 15px;position:relative;background:#fff;border-bottom:1px solid #ebebeb;}
        .closeX{position:absolute;right:10px;top:2px;font-size:22px;cursor:pointer}
        .info-middle{padding:15px 15px;border-radius:0 0 5px 5px;}
        .info-bottom{height:12px;position:relative}
        .sharp{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid #fff;position:absolute;left:50%;top:0;transform:translate(-50%,0)}
		.STYLE1 {	color: #FFFFFF;
			font-weight: bold;
			font-size: 18px;
		}
		.STYLE2 {
			color: #FF0000;
			font-weight: bold;
		}
		.STYLE3 {font-size: 12px}
    </style>
</head>
<body>

<div id="query">
    <div class="item"><input type="text" id="petName" placeholder="输入宠物店名称"/> </div>
    <div class="item"><button id="doMarkBtn">定位宠物店</button></div>
</div>
<div id="container" class="amap-container" style="position: relative; background: rgb(252, 249, 242);">
</div>


<script>

     function getQueryVariable(variable){
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
    }

    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 12,
        center: [113.38239,31.707684],

        buildingAnimation: false, //楼块出现是否带动画
    });
//mapStyle: 'amap://styles/ac617ee5ac942dc438bc8ae1b99b7939',
    map.addControl(new AMap.MapType({
        defaultType:0 //0代表默认，1代表卫星
    }));


    var title = '详细信息';
    var infoWindowArr = [],
        facilities = [];
    for (var i = 0; i < capitals.length; i++) {
        var marker = new AMap.Marker({
            position: new AMap.LngLat(capitals[i].location.lng, capitals[i].location.lat),
            offset: new AMap.Pixel(0, 0),
            icon: getMarkerIcon(capitals[i].type, capitals[i].name), // 添加 Icon 图标 URL
            title: capitals[i].name,
        });

        facilities.push(marker);
        var infoWindow = new AMap.InfoWindow({
            isCustom: true, //使用自定义窗体
            content: createInfoWindow(title, capitals[i]),
            offset: new AMap.Pixel(0, -20)
        });
        infoWindowArr.push(infoWindow);
    }
    map.add(facilities);

    for (var i = 0; i < facilities.length; i++) {
        (function(i) {
            facilities[i].on('click', function(event) {
                infoWindowArr[i].open(map, event.target.getPosition());
            });
        })(i)
    }

    marker.setLabel({
        offset: new AMap.Pixel(2,2),  //设置文本标注偏移量
        content: "", //设置文本标注内容
        direction: 'right' //设置文本标注方位
    });

    function getMarkerIcon(type, name) {
        
        if(type.indexOf('诊所') != -1 || type.indexOf('医院')  != -1 || type.indexOf('医疗')  != -1 ) {
            console.info(type,name)
            return "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";
        }else   {
            return "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png";
        }

        /*if(name.indexOf('Meetingyou') != -1 ) {
            console.info(type,name)
            return "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
        }else   {
            return "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
        }*/
    }

    //构建自定义信息窗体
    function createInfoWindow(title, storeInfo) {
        var info = document.createElement("div");
        info.className = "custom-info input-card content-window-card";

        //可以通过下面的方式修改自定义窗体的宽高
        info.style.width = "300px";
        // 定义顶部标题
        var top = document.createElement("div");
        var titleD = document.createElement("div");
        var closeX = document.createElement("span");
        top.className = "info-top";
        titleD.innerHTML = title;
        closeX.innerHTML = "&times;";
        closeX.className = "closeX";
        closeX.onclick = closeInfoWindow;

        top.appendChild(titleD);
        top.appendChild(closeX);
        info.appendChild(top);

        // 定义中部内容
        var middle = document.createElement("div");
        middle.className = "info-middle";
        middle.style.backgroundColor = 'white';
        middle.innerHTML = "店名：" + storeInfo.name+"<br/>地址："+storeInfo.address+"<br/>电话：" +storeInfo.tel+ "<br/>类型："+storeInfo.type + "<br/><a target='_blank' href='./petstore_tongzhou_detail.html?storeId="+storeInfo.id+"'>更多信息<a/> &nbsp;&nbsp;&nbsp;&nbsp; <a href='https://gaode.com/detail/"+storeInfo.id+"?src=jsapi_detail' target='_blank'>高德页</a> " ;
        /*middle.innerHTML = "店名：" + storeInfo.name+"<br/>d地址："+storeInfo.address+"<br/>电话：" +storeInfo.tel+ "<br/>类型："+storeInfo.type  ;*/
        info.appendChild(middle);



        // 定义底部内容
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        var sharp = document.createElement("span");
        sharp.className = "sharp";
        bottom.appendChild(sharp);
        info.appendChild(bottom);
        return info;
    }


    var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 11
    });

    var roadNetLayer = new AMap.TileLayer.RoadNet({
        zIndex: 10
    });

    var layerGroup = new AMap.LayerGroup([trafficLayer, roadNetLayer]);
    layerGroup.setMap(map);


    if(getQueryVariable("qy") == '1') {
        var disProvince = new AMap.DistrictLayer.Province({
            zIndex: 12,
            adcode: [421303], //曾都区
            depth: 2,
            styles: {
                'fill': function (properties) {
                    return 'rgb(158,158,255)';
                },
                'province-stroke': 'cornflowerblue',
                'city-stroke': 'white', // 中国地级市边界
                'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
            }
        });

        disProvince.setMap(map);
    }
    

    //关闭信息窗体
    function closeInfoWindow() {
        map.clearInfoWindow();
    }
 

    document.querySelector("#doMarkBtn").onclick = function() {
        var petName = document.querySelector("#petName").value;
        
         for (var i = 0; i < capitals.length; i++) {
            if(capitals[i].name.indexOf(petName) != -1) {
                var storeInfo = capitals[i];
                infoWindowArr[i].open(map, storeInfo.location);
               map.setCenter(16, [storeInfo.location.lng, storeInfo.location.lat]);

            } 
        }

    }


</script>
</body>
</html>